﻿<section id="products" class=" padding-top-bottom">
    <div class="container">
        <header class="section-header text-center">
            <h2>Products</h2>
        </header>
    </div>
    <div class="container">
        <div id="projects-container" class="row">
            <article class="design product col-xs-12 col-sm-6 col-md-4">
                <div class="img-box">
                    <div class="hover-mask2"></div>
                    <span class="product-icon icon-eye"></span>
                    <img class="img-responsive project-image" src="@Url.Content("~/Content/img/product1.jpg")" alt="">
                </div>
                <div class="product-info col-md-12">
                    <p class="project-price">$700</p>
                    <div>
                        <h4 class="project-title">Bed</h4>
                    </div>
                </div>
                <div class="sr-only project-description" data-oldprice="$800" data-images="img/01.jpg,img/02.jpg,img/03.jpg,img/04.jpg,img/05.jpg">
                    <p>1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                </div>
            </article>

            <article class="mock-up product col-xs-12 col-sm-6 col-md-4">
                <div class="img-box">
                    <div class="hover-mask2"></div>
                    <span class="product-icon icon-eye"></span>
                    <img class="img-responsive project-image" src="@Url.Content("~/Content/img/product2.jpg")" alt="">
                </div>
                <div class="product-info col-md-12">
                    <p class="project-price">$400</p>
                    <div>
                        <h4 class="project-title">Nightstand</h4>
                    </div>
                </div>
                <div class="sr-only project-description" data-images="img/06.jpg,img/07.jpg,img/08.jpg,img/09.jpg">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                    <p>Phasellus porta eros vel lacus euismod consequat. Phasellus eleifend, nibh non feugiat hendrerit, lacus enim adipiscing eros, a pharetra erat neque eget est. Quisque vitae aliquet urna. Integer suscipit lectus eu enim porttitor fringilla. Ut blandit, urna in auctor euismod, arcu eros pharetra metus, a porta purus libero a nibh.</p>
                </div>
            </article>

            <article class=" icons product col-xs-12 col-sm-6 col-md-4">
                <div class="img-box">
                    <div class="hover-mask2"></div>
                    <span class="product-icon icon-eye"></span>
                    <img class="img-responsive project-image" src="@Url.Content("~/Content/img/product3.jpg")" alt="">
                </div>
                <div class="product-info col-md-12">
                    <p class="project-price">$600</p>
                    <div>
                        <h4 class="project-title">Hammock</h4>
                    </div>
                </div>
                <div class="sr-only project-description" data-oldprice="$700" data-images="img/10.jpg,img/11.jpg,img/12.jpg">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                    <p>Nam eget urna pellentesque nisl ultrices dapibus. Mauris accumsan vehicula nisl, sed tempus mauris facilisis eu. Donec a iaculis nisi, quis malesuada justo. Pellentesque ut enim sit amet ipsum dignissim egestas. Morbi tincidunt rhoncus urna eget placerat.</p>
                </div>
            </article>
        </div>
    </div>
    <div id="project-modal" class="modal " style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" href="#" data-dismiss="modal"><i class="icon-close"></i></a>
                    <div class="loader" style="display: block;"></div>
                    <div class="screen"></div>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div id="project-sidebar" class="col-md-4 ">
                                <h2 id="sdbr-title">Flat UI-Kit</h2>
                                <div>
                                    <div id="sdbr-price">200</div>
                                    <div id="sdbr-oldprice">500</div>
                                </div>
                            </div>
                            <div id="project-content" class="col-md-8 ">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>